<template>
	<div class="header">
		<navigator url="index.html" class="header-back"></navigator>
		<div class="header-title">Base css元素</div>
	</div>
	<div class="header-row"></div>
	<div class="main-body ">
		<div class="row-box">
			<div class="row-box-hd">Base css</div>
			<div class="g-hd-3">fontsize</div>
			<div class="flex flex-mg">
				<div class="f12">f12</div> 
				<div class="f14">f14</div>
				<div class="f16">f16</div>
				<div class="f18">f18</div>
				<div class="f20">f20</div>
				<div class="f22">f22</div>
			</div>	
			<div class="g-hd-3">text color</div>
			<div class="flex flex-mg">
				<div class="cl1">cl1</div>
				<div class="cl2">cl2</div>
				<div class="cl3">cl3</div>
				<div class="cl-money">cl-money</div>
				<div class="cl-num">cl-num</div>
			</div>
			<div class="flex flex-mg">
				<div class="cl-primary">cl-primary</div>
				<div class="cl-secondary">cl-secondary</div>				
				<div class="cl-success">cl-success</div>
				<div class="cl-warning">cl-warning</div>
				<div class="cl-danger">cl-danger</div>
				<div class="cl-info">cl-info</div>
				<div class="cl-light">cl-light</div>
				<div class="cl-dark">cl-dark</div>
				<div class="cl-muted">cl-muted</div>
				<div class="cl-white">cl-white</div>
				 
			</div>
			<div class="g-hd-3">background-color</div>
			<div class="flex flex-mg">
				<div class="bg-fff">bg-fff</div>
				<div class="bg-ef">bg-ef</div>
				<div class="bg-primary">bg-primary</div>
				<div class="bg-secondary">bg-secondary</div>				
				<div class="bg-success">bg-success</div>
				<div class="bg-warning">bg-warning</div>
				<div class="bg-danger">bg-danger</div>
				<div class="bg-info">bg-info</div>
				<div class="bg-light">bg-light</div>
				<div class="bg-dark">bg-dark</div>
				<div class="bg-muted">bg-muted</div>
				<div class="bg-white">bg-white</div>
			</div>
			<div class="g-hd-3">padding </div>
			<div class="flex flex-mg">
				<div class="pd-5 bg-success">pd-5</div>
				<div class="pdl-5 bg-success">pdl-5</div>
				<div class="pdt-5 bg-success">pdt-5</div>
				<div class="pdb-5 bg-success">pdb-5</div>
				<div class="pdr-5 bg-success">pdr-5</div>
			</div>	
			<div class="g-hd-3">margin </div>
			<div class="flex flex-mg">
				<div class="mg-5 bg-success">mg-5</div>
				<div class="mgl-5 bg-success">mgl-5</div>
				<div class="mgt-5 bg-success">mgt-5</div>
				<div class="mgb-5 bg-success">mgb-5</div>
				<div class="mgr-5 bg-success">mgr-5</div>
			</div>
			<div class="g-hd-3">border</div>
			<div class="flex flex-mg bg-fff">
				<div class="bd">bd</div>
				<div class="bdl">bdl</div>
				<div class="bdr">bdr</div>
				<div class="bdt">bdt</div>
				<div class="bdb">bdb</div>
				<div class="bd bd-radius-5 wh-40"></div>
			</div>	
			<textarea style="height: 300px; width: 100%;" id="uicss-content"></textarea>	
		</div>
	</div>
</template>
<script>
	$.get("css/dt-ui-base.css",function(res){
		$("#uicss-content").html(res);
	})
</script>
<style>
	.flex-mg{
		flex-wrap: wrap;
		margin-bottom: 10px;
		align-items: flex-start;
		background-color: #eee;
	}
	.flex-mg div{
		margin-right: 5px;
		margin-bottom: 5px;
	}
</style>